<template>
  <div>
    <a-layout id="reviews-layout">
      <a-layout-header style="height: 60px">
        <span class="w-title"> 湖北省流行病学调查平台</span>
        <span class="title">分析任务详情</span>
      </a-layout-header>
    </a-layout>

    <div style="display: flex">
      <div
        style="
          width: 100%;
          margin: 10px;
          margin-bottom: 0;
          height: calc(100vh - 70px);
        "
      >
        <el-tabs
          type="border-card"
          style="width: 100%; height: 100%; background: #0015290d"
        >
          <el-tab-pane
            label="个案选择"
            class="mini-scroll"
            style="height: calc(100vh - 150px); overflow: auto"
          >
            <div>
              <div style="margin-left: 20px">
                <el-button
                  type="primary"
                  round
                  plain
                  size="mini"
                  icon="el-icon-plus"
                  @click="addRecord"
                  >新增个案</el-button
                >
              </div>
              <el-collapse-transition>
                <a-card v-if="searchShow" style="margin: 20px">
                  <span>
                    编号：
                    <el-input
                      size="mini"
                      v-model="pvalue.uuid"
                      style="width: 150px; margin-right: 20px"
                    />
                    调查对象身份证：
                    <el-input
                      size="mini"
                      v-model="pvalue.idNumber"
                      style="width: 150px; margin-right: 20px"
                      allow-clear
                    />
                  </span>
                  <a-button
                    style="margin-left: 10px"
                    icon="search"
                    @click="onSearch"
                  />
                </a-card>
              </el-collapse-transition>

              <a-table
                style="margin: 20px; background: #fff"
                rowKey="uuid"
                :columns="columns"
                :data-source="data"
                @change="onPageChange"
                :loading="loadding"
                :pagination="pager"
              >
                <span slot="action" slot-scope="record">
                  <a-button
                    v-if="
                      !record.projectList ||
                      !record.projectList.includes(projectName)
                    "
                    size="small"
                    @click="onAdd(record)"
                  >
                    添加
                  </a-button>
                  <a-button
                    v-else
                    type="danger"
                    size="small"
                    @click="onDelete(record)"
                  >
                    移除
                  </a-button>
                </span>
              </a-table>
            </div>
          </el-tab-pane>
          <el-tab-pane
            class="mini-scroll"
            label="描述性流行病学分析"
            style="height: calc(100vh - 150px); overflow: auto"
          >
            <descriptive :dataSource="rawData" />
          </el-tab-pane>
          <el-tab-pane
            class="mini-scroll"
            label="临床特征分析"
            style="height: calc(100vh - 150px); overflow: auto"
          >
            <clinical :dataSource="rawData" />
          </el-tab-pane>
          <el-tab-pane
            class="mini-scroll"
            label="轨迹分析"
            style="height: calc(100vh - 150px); overflow: auto"
          >
            <cluster :chartData="rawData" style="width: 100%;height: 100%;"/>
          </el-tab-pane>
          <el-tab-pane
            class="mini-scroll"
            label="传播链分析"
            style="height: calc(100vh - 150px); overflow: auto"
          >
            <graph-node :chartData="rawData" style="width: 100%;height: 100%;"/>
            <!-- <cluster :chartData="rawData" style="width: 100%;height: 100%;"/> -->
          </el-tab-pane>
          <el-tab-pane
            class="mini-scroll"
            label="分析性流行病学"
            style="height: calc(100vh - 200px); overflow: auto"
          >
            <analysis :dataSource="rawData" />
          </el-tab-pane>
          <el-tab-pane
            class="mini-scroll"
            label="流行病趋势工具"
            style="height: calc(100vh - 150px); overflow: auto"
          >
            <sts-tool />
          </el-tab-pane>

          <el-tab-pane
            class="mini-scroll"
            label="流调报告"
            style="height: calc(100vh - 150px); overflow: auto"
          >
            <report :rawData="rawData"/>
          </el-tab-pane>
          <el-tab-pane
            class="mini-scroll"
            label="流调报告下载"
            style="height: calc(100vh - 150px); overflow: auto"
          >
            <download-report />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog
      title="选择流调记录"
      destroy-on-close
      :visible.sync="dialogVisible"
      width="900px"
    >
      <record-select />
    </el-dialog>
  </div>
</template>

<script>
import { deleteJSON, getData, logout, postJSON, putJSON } from "@/utils/http";
import { getANLogsMap, getSHLogsMap } from "@/utils/attr-map";
import { BACKEND_URL, METADATA_CONFIG, URL_MAP } from "@/config/config";
import { mapGetters } from "vuex";
import RecordSelect from "../utils/RecordSelect.vue";
import ReportSelect from "../utils/ReportSelect.vue";
import { downLoadByUrl } from "@/utils/utils";
import Descriptive from "./Descriptive.vue";
import Vue from "vue";
import Clinical from "./Clinical.vue";
import TraceMap from "./TraceMap.vue";
import Analysis from "./Analysis.vue";
import STSTool from "../charts/STSTool.vue";
import Report from "../forms/Report.vue";
import Cluster from '../charts/Cluster.vue';
import GraphNode from '../charts/GraphNode.vue';
import DownloadReport from '../forms/DownloadReport.vue';
// import { deleteJSON, getData, putJSON } from "@/utils/http";
export default {
  components: {
    RecordSelect,
    ReportSelect,
    Descriptive,
    Clinical,
    TraceMap,
    Analysis,
    "sts-tool": STSTool,
    Report,
    Cluster,
    GraphNode,
    DownloadReport
  },

  data() {
    return {
      reportVisible: false,
      dialogVisible: false,
      collapsed: false,
      current: ["user"],
      columns: [],
      data: [],
      loadding: false,
      reviewDialogVisible: false,
      rawData: [],
      traceData: [],
      pager: {
        pageSize: 7,
        current: 1,
      },
      review: {
        msg: "无",
        uuid: "",
        pass: true,
      },
      pvalue: {
        state: "",
        idNumber: "",
        uuid: "",
      },
      searchShow: true,
      params: {},
      paramKey: "sh-log-table-session",
    };
  },
  computed: {
    ...mapGetters([
      "userid",
      "token",
      "projectName",
      "isProject",
      "isLogin",
      "username",
    ]),
  },

  methods: {
    onAdd(obj) {
      this.loadding = true;
      putJSON(URL_MAP.PROJECT_RECORD, {
        name: this.projectName,
        uuid: obj.uuid,
      })
        .then((res) => {
          if (res.code === 0) {
            this.$message.success("添加成功");
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((e) => {
          console.log(e);
          this.$message.error("添加失败");
        })
        .finally(() => {
          this.loadding = false;
          this.fetch();
        });
    },
    onDelete(obj) {
      this.loadding = true;
      deleteJSON(URL_MAP.PROJECT_RECORD, {
        name: this.projectName,
        uuid: obj.uuid,
      })
        .then((res) => {
          if (res.code === 0) {
            this.$message.success("提交成功");
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((e) => {
          console.log(e);
          this.$message.error("提交失败");
        })
        .finally(() => {
          this.loadding = false;
          this.fetch();
        });
    },
    onReport() {
      this.reportVisible = true;
    },

    goBack() {
      this.$router.go(-1);
    },
    goBackProjectList() {
      this.$router.push({
        name: "index",
      });
    },
    init() {
      let columns = getANLogsMap();
      columns.push({
        key: "action",
        scopedSlots: { customRender: "action" },
      });
      this.columns = columns;

      this.params = {
        pageSize: this.pager.pageSize,
        currentPage: this.pager.current - 1,
        projectName: this.projectName,
      };
      this.fetch();
    },
    reInit() {
      this.params = {
        pageSize: this.pager.pageSize,
        currentPage: this.pager.current - 1,
        projectName: this.projectName,
      };
      this.fetch();
    },

    addRecord() {
      this.dialogVisible = true;
    },
    loadRaw() {
      let r = [];
      let p = this.data.map(
        (v) =>
          new Promise((resolve, reject) => {
            getData(URL_MAP.LOG_DETAIL, {
              uuid: v.uuid,
            })
              .then((res) => {
                if (res.code === 0) {
                  r.push(res.data);
                }
              })
              .catch(console.log)
              .finally(resolve);
          })
      );
      Promise.all(p).then((v) => {
        this.rawData = r.map((rr) => rr.values);
        this.traceData = r.map((vv) => {
          return {
            trace: vv.values.trace,
            uuid: vv.uuid,
          };
        });
        this.$message.success("获取数据完成");
      });
    },
    async fetch() {
      this.loadding = true;
      try {
        this.params.templateType = METADATA_CONFIG.RECORD;
        let data = await getData(URL_MAP.LOG_LIST, this.params);
        // console.log(data);
        data = data.data;
        const pager = { ...this.pager };
        pager.total = data.totalCount;
        // pager.current = data.current
        pager.pageSize = data.pageSize;
        this.pager = pager;
        this.data = data.data.map((v) => {
          v.projectList = v.projectList || [];
          return v;
        });
        console.log(this.data[0])
        if(this.data[0])
          this.$store.commit('selectedTemp', this.data[0].template)
        this.loadRaw();
      } catch (e) {
        console.log(e);
      } finally {
        this.loadding = false;
      }
    },
    onOpenSearch() {
      this.searchShow = !this.searchShow;
    },
    onreportDown(r) {
      downLoadByUrl(
        BACKEND_URL + URL_MAP.WORD_DOWNLOAD + "?uuid=" + r.uuid,
        this.token,
        r.uuid + ".docx"
      );
    },
    onSearch() {
      for (let k in this.pvalue) {
        if (this.pvalue[k]) {
          this.params[k] = this.pvalue[k];
        }
      }
      this.fetch();
    },
    onPageChange(pagination, filters, sorter) {
      const pager = { ...this.pager };
      pager.current = pagination.current;
      this.pager = pager;
      this.params.pageSize = pager.pageSize;
      this.params.currentPage = pager.current - 1;
      this.fetch();
    },
    onPre(obj) {
      this.$store.commit("selectRecord", obj.uuid);
      this.$router.push({
        path: "/edit-record",
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background: #002242d2;
  color: white;
  border-color: #002242b5;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  background: #002242b5;
  color: white;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  margin: 0;
}
.el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
  background: #002242c0;
  color: aliceblue;
}
</style>